<template>
	<view class="baseForm">
		<!-- 搜索&扫码 -->
		<view class="upload-scan">
			<u-search
				v-model="searchText"
				shape="round"
				bgColor="#fff"
				:show-action="true"
				actionText="搜索"
				placeholder="请输入模具编号或名称"
				:animation="true"
				class="search"
				@search="searchList"
				@clear="searchList"
				@custom="searchList"></u-search>
			<!-- <mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError" ></mumu-get-qrcode> -->
			<u-icon
				name="scan"
				size="27px"
				:bold="false"
				@click="scanHandle"></u-icon>
		</view>
		<!-- tab-bar切换 -->
		<view class="tab-bar">
			<u-tabs
				:current="activeTab"
				:list="tabList"
				:scrollable="false"
				:activeStyle="{
					color: '#007aff',
					fontWeight: 'bold',
				}"
				lineWidth="34px"
				lineHeight="2px"
				lineColor="#007aff"
				@change="changeTab"></u-tabs>
		</view>

		<!-- 当前作业 -->
		<view class="activeHeight">
			<!-- 列表 -->
			<u-list
				ref="tableScroll"
				@scrolltolower="scrolltolower"
				class="list"
				v-if="total"
				:height="listHeight"
				:lowerThreshold="100"
				:pagingEnabled="true">
				<u-list-item v-for="(item, index) in tableList" :key="item.id">
					<view class="card">
						<view class="flex record-title">
							<text
								class="line1"
								:class="
									item.repairLevel == 1 &&
									item.repairStatus != 4 &&
									item.repairStatus != 5 &&
									item.repairStatus != 6
										? 'red-color'
										: ''
								">
								{{ item.repairCode }}
							</text>
							<text
								:class="
									item.repairStatus == 0
										? 'orange-color'
										: item.repairStatus == 4 ||
										  item.repairStatus == 5 ||
										  item.repairStatus == 6
										? 'grey-color'
										: ''
								">
								{{
									useDictionaryStore().filterDictName(
										"EamRepairStatus",
										item.repairStatus
									)
								}}
							</text>
						</view>
						<view
							class="flex flex-col justify-between flex-1 h-full record-content-body">
							<view
								class="record-content"
								@click="
									jumpEdit(
										'/eam/mold/repairHandle/edit',
										item.id,
										'1'
									)
								">
								<view class="record-item">
									<text>模具名称</text>
									<text>{{ item?.assetName || "" }}</text>
								</view>
								<view class="record-item">
									<text>模具编号</text>
									<text>{{ item?.assetCode || "" }}</text>
								</view>
								<view class="record-item">
									<text>故障状态</text>
									<text>
										{{
											useDictionaryStore().filterDictName(
												"EamFaultStatus",
												item.faultStatus
											)
										}}
									</text>
								</view>
								<view
									class="record-item"
									v-show="item?.remarks">
									<text>故障描述</text>
									<view
										class="line1"
										style="
											width: calc(750rpx - 30px - 140px);
											display: block;
										">
										{{ item?.remarks || "" }}
									</view>
								</view>
								<view class="record-item">
									<text>报修时间</text>
									<text>{{ item?.repairTime }}</text>
								</view>
							</view>
						</view>
						<!-- <view v-show="item.repairStatus>2" class="mt-4"></view> -->
						<view
							v-show="item.repairStatus != ''"
							class="record-footer">
							<!-- 待确认状态下，可以进行确认和返修操作 -->
							<!-- <button v-show="item.repairStatus == 3" class="record-btn orange-btn" @click="openPrompt(item, 2)">返修</button> -->
							<!-- <button v-show="item.repairStatus == 3" class="record-btn reach" @click="openPrompt(item, 4)">确认</button> -->
							<!-- 已应答和维修中的情况，可以进行故障关闭操作，输入关闭原因 -->
							<!-- <button v-show="item.repairStatus == 1 || item.repairStatus == 2" class="record-btn complete" @click="openPrompt(item, 6)">故障关闭</button> -->
							<!-- 未应答状态下，可以取消和修改 -->
							<!-- <button v-show="item.repairStatus == 0" class="record-btn complete" @click="openPrompt(item, 5)">故障取消</button> -->
							<!-- <button v-show="item.repairStatus == 0" class="record-btn reach" @click="jumpEdit('/eam/mold/repairOrderCreate/index', item.id, '')">修改</button> -->

							<button
								class="record-btn orange-btn"
								v-if="item.repairStatus == '0'"
								@click="openPrompt(item, 1)">
								应答
							</button>
							<button
								v-if="item.repairStatus == 1"
								@click="openPrompt(item, 2)"
								class="record-btn reach">
								开始维修
							</button>
							<!-- <button
						            type="primary"
						            v-if="item.repairStatus == 2"
						            >维修完成</button
						          > -->
							<button
								v-if="
									item.repairStatus != 0 &&
									item.repairStatus != 1
								"
								class="record-btn reach"
								@click="
									jumpEdit(
										'/eam/mold/repairHandle/edit',
										item.id,
										'0'
									)
								">
								编辑
							</button>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view class="flex justify-center" v-show="tableLoading">
				<u-loading-icon color="#000a7b"></u-loading-icon>
			</view>
			<!-- 空数据 -->
			<view v-show="tableList.length === 0 && !tableLoading">
				<u-empty
					mode="list"
					icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>

		<!-- <u-button text="立即报修" color="#0F40F5" class="first-btn" @click="jumpEdit('/eam/mold/repairOrderCreate/index')"></u-button> -->

		<u-modal
			:show="showImport"
			ref="uModal"
			:content="promptText"
			confirmText="确认"
			showCancelButton
			@cancel="cancelImport"
			@confirm="confirmImport">
			<view class="slot-content">
				<text v-show="promptStatus !== 6">{{ promptText }}</text>
				<view v-show="promptStatus === 6" class="">
					<!-- <text>{{promptText}}</text> -->
					<u-input
						v-model="promptReason"
						:placeholder="promptText"
						style="width: 500rpx"></u-input>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
	onShow,
	onPullDownRefresh,
	onLoad,
	onBackPress,
} from "@dcloudio/uni-app";
import { http } from "@/utils/http";
import { PageResult, TabInfo } from "@/types/type";
import { getSecondTime } from "@/utils/common";
import { useDictionaryStore } from "@/stores/useDictionaryStore";
import { toScanCode } from "@/components/hs-scancode/scan.js";
// import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue';

// 监听返回按钮事件
onBackPress((option) => {
	if (option.from === "backbutton") {
		uni.switchTab({
			url: "/pages/index/index",
		});
	}
	return true;
});

const promptText = ref("");
const promptStatus = ref(null);
const promptReason = ref("");
function getStatusText(item, status) {
	promptReason.value = "";
	if (status === 1) {
		promptText.value = `请确认，是否应答编号为${item.repairCode}的报修单?`;
	} else if (status === 2) {
		promptText.value = `请确认，是否开始维修编号为${item.repairCode}的报修单?`;
	}
	// else if (status === 2) {
	// 	promptText.value = `请确认，编号为${item.repairCode}的报修单是否返修?`;
	// } else if (status === 6) {
	// 	promptText.value = `请填写故障关闭原因`;
	// }
}

function qrcodeSucess(data) {
	uni.showModal({
		title: "成功",
		content: data,
		success: () => {
			// uni.navigateBack({})
		},
	});
}
function qrcodeError(err) {
	console.log(err);
	uni.showModal({
		title: "摄像头授权失败",
		content: "摄像头授权失败，请检测当前浏览器是否有摄像头权限。",
		success: () => {
			// uni.navigateBack({})
		},
	});
}

const activeTab = ref(0);
const tabList = [
	{ name: "所有" },
	{ name: "待处理" },
	{ name: "处理中" },
	{ name: "已完成" },
];
function changeTab(val: TabInfo) {
	activeTab.value = val.index;
	searchList();
}

// 待完成数据
const tableList = ref([]);
const tableLoading = ref(false);
const current = ref(0);
const totalPage = ref(0);
const total = ref(0);

//列表高度
const listHeight = ref("");

onLoad(() => {
	// #ifdef H5
	listHeight.value = "calc(100vh - 88px - 44px)";
	// #endif

	// #ifdef APP-PLUS
	listHeight.value = "calc(100vh - 48px - 44px)";
	// #endif
	loadmore();
});

onPullDownRefresh(() => {
	searchList();
});

async function loadmore(type?: string) {
	try {
		current.value += 1;
		tableLoading.value = true;
		const result: PageResult<any> = await http({
			method: "POST",
			url: "/eam/mouldrepairorder/queryMyRepairOrder",
			data: {
				current: current.value,
				size: 20,
				data: {
					progressStatus: activeTab.value,
					assetInfo: searchText.value,
				},
			},
		}).finally(() => {
			tableLoading.value = false;
		});
		const list = result.data;
		for (let i = 0; i < list.length; i++) {
			tableList.value.push(list[i]);
		}
		totalPage.value = result.page;
		total.value = result.total;
		type === "refresh" && uni.stopPullDownRefresh();
	} catch (e) {
		console.log(e);
	}
}
const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};

// 选择作业
const selectInfo = ref({});
const showImport = ref(false);
function openPrompt(row, status) {
	promptStatus.value = status;
	getStatusText(row, status);
	showImport.value = true;
	selectInfo.value = row;
}

// 取消选择
function cancelImport() {
	showImport.value = false;
	selectInfo.value = {};
}

function changeStatus() {
	return new Promise(async (resolve, reject) => {
		const res = await http({
			method: "POST",
			url: "/eam/mouldrepairorder/updateStatus",
			data: {
				id: selectInfo.value.id,
				repairStatus: promptStatus.value,
				memo: promptStatus.value === 4 ? promptReason.value : "",
			},
		}).catch((e) => {
			// showImport.value = false;
		});
		resolve(res);
	});
}
// 追加加工单
async function confirmImport() {
	if (promptStatus.value === 6 && !promptReason.value) {
		uni.showToast({
			title: "请填写故障关闭原因",
			icon: "none",
		});
		return;
	}
	const { code } = await changeStatus();
	if (code === 200) {
		uni.showToast({
			title: "操作成功",
		});
		if (promptStatus.value === 2) {
			jumpEdit("/eam/mold/repairHandle/edit", selectInfo.value.id, "0");
		} else {
			searchList();
		}
	} else {
		uni.showToast({
			title: "操作失败",
		});
	}
	showImport.value = false;
}

// H5端扫码调用
const showMumuQrcode = ref(false);

// 点击扫码
const searchText = ref("");
// function openScan() {
// 	/* #ifdef H5 */
// 	uni.showToast({
// 		icon: 'none',
// 		title: '请到安卓设备进行扫码'
// 	});
// 	showMumuQrcode.value = true;
// 	/* #endif */
// 	// 只允许通过相机扫码
// 	uni.scanCode({
// 		scanType: ['barCode', 'qrCode'],
// 		onlyFromCamera: true,
// 		success: function (res) {
// 			searchText.value = JSON.stringify(res.result);
// 			searchList();
// 			console.log('条码类型：' + res.scanType);
// 			console.log('条码内容：' + res.result);
// 		}
// 	});
// }

function scanHandle() {
	toScanCode({
		onlyFromCamera: true, // 只允许通过相机扫码
	})
		.then((res) => {
			uni.showToast({
				icon: "success",
				title: "扫码成功",
			});
			searchText.value = res;
			searchList();
		})
		.catch((e) => {
			uni.showToast({
				icon: "error",
				title: e,
			});
		});
}

// 列表搜索
function searchList() {
	current.value = 0;
	tableList.value = [];
	loadmore("refresh");
}

// 网页跳转
function jump(item, id = "") {
	uni.navigateTo({
		url: id ? `/pages${item}?id=${id}` : `/pages${item}`,
		fail: () => {
			uni.showToast({
				title: "敬请期待",
				icon: "error",
			});
		},
	});
}

function jumpEdit(item, id = "", read = "0") {
	uni.navigateTo({
		url: id
			? `/pages${item}?assetKind=3&repairSource=1&id=${id}&isRead=${read}`
			: `/pages${item}?assetKind=3&repairSource=1`,
		fail: () => {
			uni.showToast({
				title: "敬请期待",
				icon: "error",
			});
		},
	});
}
</script>

<style lang="scss" scoped>
uni-page-body {
	height: 100%;
	background-color: #fbfbff;
}
.search {
	:deep(.u-search__content) {
		box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
	}
}
.baseForm {
	background-color: #fbfbff;
	.tab-bar {
		padding: 0 20px;
	}
	.upload-scan {
		padding: $uni-page-padding;
		padding-top: 5px;
		padding-bottom: 5px;
		display: flex;
		align-items: center;
		// box-shadow: 0 1px 10px 0px rgb(19 10 236 / 10%);
		.u-icon {
			margin-left: 8px;
		}
	}
	.u-line {
		padding: 10px 0;
	}
}
.list {
	.card {
		margin: $uni-page-padding;
		margin-top: 5px;
		margin-bottom: 7px;
		border-radius: 7px;
		padding: 10px 12px 0px 12px;
		transition: all 300ms ease;
		box-shadow: 0 2px 6px rgba(3, 121, 255, 0.1);
		background-color: #fff;
		.card-flex {
			display: flex;
			align-items: flex-start;
		}
		.right {
			flex: 1;
		}
		.title {
			font-size: 14px;
			line-height: 40px;
			height: 40px;
			margin-top: 8px;
			font-weight: bold;
			color: #101010;
			border-top: 1px solid #e5ebff;
		}
		.uni-btn {
			float: right;
			font-size: 12px;
			height: 24px;
			line-height: 24px;
			padding: 0 15px;
			margin-top: 7px;
			font-weight: 400;
		}
		.des {
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 3px;
		}
		.left {
			flex-basis: calc(50% + 10px);
		}
	}

	:deep(.u-list-item:nth-last-child(1)) {
		margin-bottom: 60px;
	}
}

.record-title {
	display: flex;
	justify-content: space-between;
	margin: 5px 0 3px 0;
	color: $primary-color;
	uni-text:nth-child(1) {
		font-weight: bold;
		font-size: 17px;
	}
	uni-text:nth-child(2) {
		font-size: 14px;
		min-width: 60px;
		text-align: right;
	}
}
.record-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid #f5f5f5;
	.record-btn {
		height: 30px;
		outline: none;
		border: none;
		line-height: 30px;
		border-radius: 30px;
		font-size: 14px;
		margin: 0px;
		margin-left: 10px;
		width: 100px;
	}
}
.u-loading-icon {
	margin: 8px 0;
}
.first-btn {
	position: fixed;
	bottom: 0;
	height: 42px;
	border-radius: 30px;
	margin: 10px 20px;
	width: calc(100% - 40px);
	font-size: 18px;
	:deep(.u-button__text) {
		font-size: 16px !important;
		font-weight: bold;
	}
}
</style>
